<#assign baseURL = springMacroRequestContext.getContextPath() />
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拓深科技</title>
<#include "./css.ftl">
</head>
<body>
<div id="wrapper">

<#include "./left_nav.ftl">

    <div id="page-wrapper" class="gray-bg dashbard-1">
    <#include "./top_nav.ftl">
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-9">
                <h2>通道管理</h2>
                <ol class="breadcrumb">
                    <li>
                        消防用水管理系统
                    </li>
                    <li class="active">
                        通道管理
                    </li>
                </ol>
            </div>
        </div>

        <div class="wrapper wrapper-content">
            <div class="ibox-content">
                <div class="">
                    <div >
                        <button <#if (role_type_id > 1)>disabled</#if> type="button" style="margin-bottom: 10px;" class="btn btn-outline btn-primary" data-toggle="modal" data-target="#channelAddModal" ><i class="fa fa-plus"></i>&nbsp;&nbsp;添加通道信息</button>
                    </div>
                    <div class="modal inmodal" id="channelAddModal"  role="dialog" aria-hidden="true" >
                        <div class="modal-dialog">
                            <div class="modal-content animated bounceInDown">
                                <div class="modal-header">
                                    <i class="fa fa-sitemap modal-icon"></i>
                                    <h4 class="modal-title">添加通道数据</h4>
                                </div>
                                <div class="modal-body">
                                    <form id="modelForm" class="form-horizontal">
                                        <div class="form-group"><label class="col-lg-2 control-label">水压主机</label>
                                            <div class="col-lg-10">
                                                <select id="deviceName" class="select2_class_1 form-control select2-hidden-accessible" tabindex="-1" aria-hidden="true" style="width: 100%">
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group"><label class="col-lg-2 control-label">通道编号</label>
                                            <div class="col-lg-10"><select id="deviceChannel"  class="select2_class_2 form-control " tabindex="-1" aria-hidden="true" style="width: 100%"></select></div>
                                        </div>
                                        <div class="form-group"><label class="col-lg-2 control-label">采集类型</label>
                                            <div class="col-lg-10"><select id="channelType"  class="select2_class_3 form-control " tabindex="-1" aria-hidden="true" style="width: 100%"></select></div>
                                        </div>
                                        <div class="form-group"><label class="col-lg-2 control-label">报警低限</label>
                                            <div class="col-lg-10"><input id="alertLow"  class="form-control" name="alertLow" ></div>
                                        </div>
                                        <div class="form-group " ><label class="col-lg-2 control-label">报警高限</label>
                                            <div class="col-lg-10"><input id="alertHigh"  class="form-control" name="alertHigh"  ></div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button id="channelCANCEL" type="button" class="btn btn-white" data-dismiss="modal"><i class="fa fa-mail-reply"></i>&nbsp;&nbsp;取消</button>
                                    <button id="channelSave" type="button" class="btn btn-primary"><i class="fa fa-check"></i>&nbsp;&nbsp;保存</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <table class="table table-striped table-bordered table-hover " id="channelTable" cellspacing="0" width="100%">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>地理位置</th>
                            <th>水压主机</th>
                            <th>IP</th>
                            <th>通道X</th>
                            <th>类型</th>
                            <th>低限</th>
                            <th>高限</th>
                            <th>单位</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="modal inmodal" id="mapModal" tabindex="-1" role="dialog"  aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content animated fadeIn">
                    <div class="modal-body" style="padding: 1px 1px 1px 1px ">
                        <div id="iPicture" data-interaction="hover">
                            <div class="ip_slide">
                                <img id="mapImg" src="" alt="加载地图失败" width="100%" onclick="mapOnClick(event)" />
                                <div id="pos" class="ip_tooltip ip_img32" style="top: 10px; left: 10px;"  data-round="roundBgR">
                                </div>
                            </div>
                        </div>
                        <input id="mapPosIDinput"  type="text" style="display: none">
                    </div>
                    <div>
                        <p style="text-align: center">可以点击地图上的新坐标来修改坐标点。</p>
                    </div>
                    <div class="modal-footer">
                        <button <#if (role_type_id > 2 )>style="display: none;" </#if> id="posBtnDelete" type="button" class="btn btn-danger">删除坐标点</button>
                        <button <#if (role_type_id > 2 )>style="display: none;" </#if> id="posBtnModify" type="button" class="btn btn-info">保存坐标点</button>
                        <button id="posBtnCancel" type="button" class="btn btn-white" data-dismiss="modal">退出</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal inmodal" id="updateModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content animated bounceInRight">
                    <div class="modal-header">
                        <i class="fa fa-exchange modal-icon"></i>
                        <h4 class="modal-title">修改监测点上限下限</h4>
                    </div>
                    <div class="modal-body">
                        <form id="updateForm" enctype="multipart/form-data"  class="form-horizontal" >
                            <div class="form-group" style="display: none"><label class="col-lg-2 control-label">ID</label>
                                <div class="col-lg-10"><input id="channelID" style="display: none;" type="text"  class="form-control" ></div>
                            </div>
                            <div class="form-group"><label class="col-lg-2 control-label">上限</label>
                                <div class="col-lg-10"><input ID="channelHigh"  type="text"  class="form-control"></div>
                            </div>
                            <div class="form-group"><label class="col-lg-2 control-label">下限</label>
                                <div class="col-lg-10"><input id="channelLow"  type="text"  class="form-control"></div>
                            </div>
                        </form>
                    </div>i
                    <div class="modal-footer">
                        <button id="updateCANCEL" type="button" class="btn btn-white" data-dismiss="modal"><i class="fa fa-mail-reply"></i>&nbsp;&nbsp;取消</button>
                        <button id="updateSave" type="button" class="btn btn-primary"><i class="fa fa-check"></i>&nbsp;&nbsp;保存</button>
                    </div>
                </div>
            </div>
        </div>

    <#include "./bottom_nav.ftl">
    </div>

</div>


<#include "./js.ftl">

<script>

    var ch_arr = [{ id: 1, text: '通道1' }, { id: 2, text: '通道2' }, { id: 3, text: '通道3' }, { id: 4, text: '通道4' }];
    var type_arr = [{ id: 0, text: '水位' }, { id: 1, text: '水压' }];
    var unit_arr = [{ id: 0, text: 'm(米)' }, { id: 1, text: 'Mpa(兆帕)' }];

    var channelTable = $('#channelTable').DataTable({
        language: {
            "sProcessing": "处理中...",
            "sLengthMenu": "显示 _MENU_ 项结果",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        },
        ajax: "${baseURL}/water/channel/getAll",
        columns:[
            {"data":"id"},
            {"data":"geo"},
            {"data":"name"},
            {"data":"ip"},
            {"data":"channel"},
            {"data":"type","render": function ( data, type, row, meta ){
                if(data === 0){
                    return '水位';
                }
                else {
                    return '水压';
                }
            }},
            {"data":"low"},
            {"data":"high"},
            {"data":"unit"},
            {"data":null,"render":function(data,type,row,mete){
                var obj = encodeURIComponent(JSON.stringify(row));
                return '<div class="col-md-12" style="padding: 0 0 0 0;">' +
                        '<div class="col-md-4" style="padding: 0 2px 0 0;"><button <#if (role_type_id > 2)>disabled</#if> data-toggle="modal" data-target="#updateModal" onclick='+"editBtn("+'"'+obj+'"'+")"+ ' type="button" class="btn btn-block btn-success" style="padding: 0 0 0 0;"><i class="fa fa-pencil-square-o"></i>&nbsp;&nbsp;编&nbsp;辑</button></div>' +
                        '<div class="col-md-4" style="padding: 0 2px 0 0;"><button onclick="mapBtn('+row.id+')" type="button" class="btn btn-block btn-primary" data-toggle="modal" data-target="#mapModal" style="padding: 0 0 0 0"><i class="fa fa-map-marker"></i>&nbsp;&nbsp;地&nbsp;图</button></div>' +
                        '<div class="col-md-4" style="padding: 0 2px 0 0;"><button <#if (role_type_id > 1)>disabled</#if> onclick="deleteChannelBtn('+row.id+')" type="button" class="btn btn-block btn-danger" style="padding: 0 0 0 0"><i class="fa fa-trash"></i>&nbsp;&nbsp;删&nbsp;除</button></div> ' +
                        '</div>';
            },"width":"auto"}
        ],
        destroy: true,
        serverSide: false,
        ordering:false
    });

    function editBtn(obj){
        var data = JSON.parse(decodeURIComponent(obj));
        $("#channelID").val(data.id);
        $("#channelLow").val(data.low);
        $("#channelHigh").val(data.high);
    }

    $("#updateSave").click(function(){
        var id = $("#channelID").val();
        var low = $("#channelLow").val();
        var high = $("#channelHigh").val();
        $.ajax({
            type: "POST",
            contentType: "application/x-www-form-urlencoded",
            dataType: "json",
            url: "${baseURL}/water/channel/updateChannel",
            async: false,
            data: {"id":id, "low":low, "high":high},
            success:function(data){
                if(data.code === 0){
                    swal({
                        title: "修改成功。",
                        type: "success"
                    },function(){
                        channelTable.ajax.reload();
                        $("#updateCANCEL").click();
                    });
                }else{
                    swal({
                        title: "修改失败。",
                        type: "error"
                    });
                }
            },
            error:function(xhr, status, error){
                console.log(xhr.responseText)
                swal({
                    title: "请求异常。",
                    type: "error"
                })
            }
        });
    });

    $("#posBtnDelete").click(function(){
        if($("#mapPosIDinput").val() != ""){
            console.log($("#mapPosIDinput").val())
            $.ajax({
                type: "POST",
                contentType: "application/json",
                dataType: "json",
                url: "${baseURL}/water/map_pos/delete?id=" + $("#mapPosIDinput").val(),
                async: false,
                success:function(data){
                    if(data.code === 0){
                        swal({
                            title: "删除成功。",
                            type: "success"
                        },function(){
                            location.reload();
                        });
                    }else{
                        swal({
                            title: "删除失败。",
                            type: "error"
                        });
                    }
                },
                error:function(xhr, status, error){
                    swal({
                        title: "请求异常。",
                        type: "error"
                    })
                }
            });
        }
    });

    function mapOnClick(e){
        e = e || window.event;
        var imgId ='#'+ $(e.target).attr('id');
        var currentWidth = $(imgId).width();
        var currentHeight = $(imgId).height();
        var offsetX = e.pageX - $(imgId).offset().left;
        var offsetY = e.pageY - $(imgId).offset().top;
        var x = offsetX / currentWidth;
        var y = offsetY / currentHeight;
        $("#pos").css({
            "left":($("#mapImg").width()) * x + "px",
            "top":($("#mapImg").height()) * y + "px",
        });
        $("#posBtnModify").prop("disabled", false);
    }

    $("#posBtnModify").click(function(){
        if($("#mapPosIDinput").val() != ""){
            var xpx = $("#pos").css("left");
            var ypx = $("#pos").css("top");
            var x = xpx.substring(0,xpx.lastIndexOf("px"));
            var y = ypx.substring(0,ypx.lastIndexOf("px"));
            var w = $("#mapImg").width();
            var h = $("#mapImg").height();
            var x_pos = x / w;
            var y_pos = y / h;
            $.ajax({
                type: "POST",
                contentType: "application/json",
                dataType: "json",
                url: "${baseURL}/water/map_pos/update1",
                async: false,
                data:JSON.stringify({"id":$("#mapPosIDinput").val(),"pos_x":x_pos,"pos_y":y_pos}),
                success:function(data){
                    if(data.code === 0){
                        swal({
                            title: "操作成功。",
                            type: "success"
                        },function(){

                        })
                    }else{
                        swal({
                            title: "操作失败。",
                            type: "error"
                        })
                    }
                },
                error:function(xhr, status, error){
                    console.log(xhr.responseText)
                    swal({
                        title: "请求异常。",
                        type: "error"
                    })
                }
            });
        }
    });

    function mapBtn(id){
        $("#posBtnModify").prop("disabled", true);
        $.ajax({
            type: "GET",
            contentType: "application/json",
            dataType: "json",
            url: "${baseURL}/water/channel/get?id=" + id,
            async: false,
            success:function(data){
                if(data.code === 0){
                    $("#mapImg").attr("src", "${baseURL}/water/file/location/getMap?id=" + data.data.geo_id);
                    $("#mapPosIDinput").val("");
                    if(data.data.pos_x !== undefined && data.data.pos_y !== undefined){
                        $("#mapPosIDinput").val(data.data.map_pos_id);
                        $("#mapImg").load(function(){
                            $("#pos").css({
                                "left":($("#mapImg").width()) * data.data.pos_x + "px",
                                "top":($("#mapImg").height()) * data.data.pos_y + "px",
                            });
                        });
                        $("#iPicture").iPicture();
                    }
                }
                else{
                    swal({
                        title: "操作失败。",
                        type: "error"
                    })
                }
            },
            error:function(xhr, status, error){
                swal({
                    title: "请求异常。",
                    type: "error"
                })
            }
        });
    }

    function deleteChannelBtn(id){
        $.ajax({
            type: "POST",
            contentType: "application/json",
            dataType: "json",
            url: "${baseURL}/water/channel/delete?id=" + id,
            success:function(data){
                if(data.code === 0){
                    swal({
                        title: "删除成功。",
                        type: "success"
                    });
                    channelTable.ajax.reload();
                }
                else{
                    swal({
                        title: "操作失败。",
                        type: "error"
                    })
                }
            },
            error:function(xhr, status, error){
                swal({
                    title: "操作失败。",
                    type: "error"
                })
            }
        });
    };

    $(function(){

       $("input").on("change paste keyup", function(){
           var value = $(this).val();
           var floatReg = new RegExp("^\\d+(\\.\\d+)?$");
           if(!floatReg.test(value)) {
               $(this).css({'color' : "#F73E60"});
           }
           else {
               $(this).css({'color' : "#000000"});
           }
       });

        $.ajax({
            url: "${baseURL}/water/channel/getSelect2DeviceName",
            dataType: 'json',
            type: "GET",
            success:function(data){
                $(".select2_class_1").select2({
                    dropdownParent: $('#modelForm'),
                    language: {
                        "noResults": function () {
                            return "没有数据";
                        }
                    },
                    allowClear:false,
                    placeholder: "请选择主机",
                    data: data
                });
            }
        });

        $(".select2_class_2").select2({
            dropdownParent: $('#modelForm'),
            language: {
                "noResults": function () {
                    return "没有数据";
                }
            },
            allowClear:false,
            placeholder: "请选择通道",
            data:ch_arr
        });

        $(".select2_class_3").select2({
            dropdownParent: $('#modelForm'),
            language: {
                "noResults": function () {
                    return "没有数据";
                }
            },
            allowClear:false,
            placeholder: "请选择采集类型",
            data: type_arr
        });

        $(".select2_class_4").select2({
            dropdownParent: $('#modelForm'),
            language: {
                "noResults": function () {
                    return "没有数据";
                }
            },
            allowClear:false,
            placeholder: "请选择通道单位",
            data: unit_arr
        });

    });

    $("#channelSave").click(function(){
        var device_id = $("#deviceName").find("option:selected").val();
        var channel_id = $("#deviceChannel").find("option:selected").val();
        var type_id = $("#channelType").find("option:selected").val();
        var low = $("#alertLow").val();
        var high = $("#alertHigh").val();
        var data = {"device_id":device_id,"channel_number":channel_id,"type_id":type_id,"low":low,"high":high};
        $.ajax({
            type: "POST",
            contentType: "application/json",
            dataType: "json",
            url: "${baseURL}/water/channel/add",
            data: JSON.stringify(data),
            success:function(data)
            {
                if(data.code === 0){
                    swal({
                        title: "操作成功。",
                        type: "success"
                    });
                    channelTable.ajax.reload();
                    $("#channelCANCEL").click();
                }
                else{
                    swal({
                        title: data.data,
                        type: "error"
                    });
                }
            },
            error:function(error) {
                swal({
                    title: "提交失败，请检查输入的内容。",
                    type: "error"
                });
            }
        });
    });


</script>
</body>
</html>